<!--
 * @description: 容器组件
-->
<template>
	<component :is="showComponent" class="title_left_right">
		<div class="item_title" v-if="title !== ''">
			<div class="left"></div>
			<span class="title-inner"> &nbsp;&nbsp;{{ title }}&nbsp;&nbsp; </span>
			<div class="right"></div>
		</div>
		<div :class="title !== '' ? 'item_wrapper_content' : 'item_wrapper_content_def'">
			<slot></slot>
		</div>
	</component>
</template>

<script>
export default {
    props: {
        title: { type: String, default: () => "" },
        box: { type: String, default: "13" }, // 边框定义，参考：http://datav.jiaminghi.com/guide/borderBox.html
    },
    data() {
        return {
            showComponent: 'dv-border-box-13',
        };
    },
    beforeMount() {
        this.showComponent = `dv-border-box-${this.box}`;
    },
};
</script>

<style lang="scss" scoped>
$item-title-height: 32px;
$item_wrapper_content-height: calc(100% - 32px);

.title_left_right {
    box-sizing: border-box;

    :deep(.border-box-content) {
        box-sizing: border-box;
        padding: 8px 8px 0px;
    }

    .item_title {
        height: $item-title-height;
        line-height: $item-title-height;
        width: 100%;
        color: #31abe3;
        text-align: center;
        // background: linear-gradient(to right, transparent, #0f0756, transparent);
        position: relative;
        display: flex;
        align-items: center;
        justify-content: center;

        .left,
        .right {
            width: 58px;
            height: 14px;
            background-image: url("@/assets/images/v_title_left.png");
        }

        .right {
            transform: rotate(180deg);
        }

        .title-inner {
            font-weight: 900;
            letter-spacing: 2px;
            background: linear-gradient(92deg,
                    #0072ff 0%,
                    #00eaff 48.8525390625%,
                    #01aaff 100%);
            background-clip: text;
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }
    }

    .item_wrapper_content {
        height: $item_wrapper_content-height;
    }

    .item_wrapper_content_def {
        width: 100%;
        height: 100%;
    }
}
</style>
